<template>
    <div class="userform">
        <h2>反馈及意见 <span class="QuiredIcon">*</span></h2>
        <form id="response-form" name="response-form" enctype="multipart/form-data">
            <input style="display:none">
            <div class="response-formArea">
                <textarea v-model="userMsg" name="userText" id="response-text" maxlength="300" required="required" placeholder="请描述您遇到的问题或反馈意见。若功能异常，上传页面截图会更快解决！"></textarea>
                <p class="counterP textDescript">{{ userMsg.length }}/300字 &nbsp;</p>
                <div class="imgAndTel">
                    <div class="imgArea">
                        <h2>添加图片<span class="textDescript">（提供问题截图）</span></h2>
                        <ul class="diyImgFile">
                            <li v-for="(item, index) in imglist">
                                <span v-if="item.data ==''">+</span>
                                <img v-if="item.data != ''" :src="item.data || ''" alt="">
                                <input @change="pushImg($event, index)" type="file" name="files" class="img-input"  accept="image/gif, image/jpeg, image/x-png, image/bmp">
                                <span v-if="item.data !=''" class="img-clear" @click="popImg($event, index)">&#xe6b8;</span>
                            </li>
                        </ul>
                    </div>
                    <div class="telArea">
                        <h2>联系电话&nbsp;<span class="QuiredIcon">*</span><span class="textDescript">（请填写手机号，便于我们与您联系）</span></h2>
                        <input v-model="userTel" class="telNumInput" id="userTelNum" name="phone" type="text" required="required" maxlength="16" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')">
                    </div>
                </div>
                <div class="buttonArea">
                    <button type="button" class="btn-blue" @click="submitForm($event)">提交</button>
                    <button type="button" class="btn-gray" @click="closeFrom(false)">取消</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    import axios from 'vue-axios'
    export default{
        data () {
            return {
                userMsg: '',
                userTel: '',
                imglist: [
                    {
                        data: '',
                        file: null,
                    },
                    {
                        data: '',
                        file: null,
                    },
                    {
                        data: '',
                        file: null,
                    },
                    {
                        data: '',
                        file: null,
                    },
                    {
                        data: '',
                        file: null,
                    }],
                uploadFlag: {
                    flag: false
                },
            }
        },
        props: ['msgid','fatherStates'],
        methods: {
            pushImg : function(e, i){
                let inputDOM = e.target, images= this.imglist;
                let reader = new FileReader(inputDOM.files[0]);
                reader.readAsDataURL(inputDOM.files[0]);
                reader.onload = function(e){
                    images[i].data = this.result;
                }
                images[i].file = inputDOM.files[0];
            },
            popImg: function(e, i){
                this.imglist[i].data = '';
            },
            submitForm: function (e) {
                let _this = this;
                if(this.userMsg =='' || this.userTel ==''){
                    alert('不能为空！');
                    return false;
                }
                let rformdata= new FormData();
                rformdata.append('userText', _this.userMsg);
                rformdata.append('phone', _this.userTel);
                let noneImg = true;
                for(let imgitem of _this.imglist){
                    if(imgitem.file) {
                        noneImg = false;
                        rformdata.append('files', imgitem.file);
                    }
                }
                if(noneImg) {
                    rformdata.append('files',null);
                }
                if(_this.fatherStates){
                    rformdata.append('userCommitInfoId',_this.fatherStates.id);
                }
                $.ajax({
                    url: '/userCommit/add',
                    type: 'POST',
                    dataType: 'JSON',
                    data: rformdata,
                    processData: false,
                    contentType: false
                })
                    .done(function(rdata) {
                        //只要提交成功就显示提示。
                        $('.uploaded').css('display','flex');
                        _this.resetData();
                        setTimeout(()=>{
                            $('.uploaded').hide();
                        },2000);
                        if(_this.fatherStates) {
                            //更改状态
                            _this.$emit('subAdd',0);
                        }
                    })
            },
            closeFrom: function (f = false) {
                let fStates = this.fatherStates;
                $('#response-form')[0].reset();
                if(fStates){
                    this.$emit("changesome",{
                        flag : f,
                    });
                }else{
                    $('#set_clear').click();
                }
            },
            resetData: function(){
                this.imglist= [{
                    data: ''
                },
                    {
                        data: ''
                    },
                    {
                        data: ''
                    },
                    {
                        data: ''
                    },
                    {
                        data: ''
                    }];
                this.userMsg = '';
                this.uploadFlag = false;
            }
        },
        mounted(){
        },
        watch: {
            userMsg: function (val,oval) {
                if(val.length > 300) this.userMsg = val.substr(0,300);
            },
            userTel: function (val,oval) {
                if(val.length > 16) this.userTel = val.substr(0,16);
            }
        }
    }
</script>

<style scoped>

    .response-formArea{
        margin-top: 20px;
    }
    #response-text{
        resize:none;
        width: 638px;
        height: 200px;
        border: none;
        outline: none;
        background-color: rgb(33,67,113);
        padding: 10px 0 0 10px;
        color: #fff;
    }
    #response-text::-webkit-input-placeholder {
        color: #6c7b98;
    }
    #response-text:-moz-placeholder {
        color: #6c7b98;
    }
    .textDescript{
        color: #6c7b98;
    }
    .response-formArea .counterP{
        text-align: right;
        margin-top: 10px;
    }
    .imgAndTel{
        margin-top: 40px;
    }
    .imgAndTel .imgArea{
        float: left;
        width: 50%;
    }
    .diyImgFile{
        margin-top: 20px;
    }
    .diyImgFile li{
        cursor: pointer;
        position: relative;
        margin-right: 9px;
        width: 50px;
        height: 50px;
        display: inline-block;
        border: 1px solid #6c7b98;

    }
    .diyImgFile li span{
        color: #6c7b98;
        font-size: 35px;
        position:absolute;
        left: 12px;
        top: 0px;

    }
    .diyImgFile .img-clear{
        display: inline-block;
        font-size: 16px;
        font-family: icon;
        color: #d85330;
        z-index: 4;
        left: 43px;
        top: -13px;
        position: absolute;
    }
    .diyImgFile li img{
        display: inline-block;
        width: 50px;
        height: 50px;
        z-index: 3;
        top: 0;
        position: absolute;
    }
    .diyImgFile input{
        width: 100%;
        height: 50px;
        outline: none;
        z-index: 2;
        opacity: 0;
    }
    .imgAndTel .telArea{
        float: right;
        width: 48%;
        letter-spacing: 0px;
    }
    .telArea .telNumInput{
        display: block;
        margin-top: 20px;
        width: 100%;
        height: 30px;
        outline: none;
        border: none;
        background-color: rgb(33,67,113);
        color: #fff;
        font-size: 14px;
        text-indent:14px;
    }
    .buttonArea{
        clear: both;
        padding-top: 80px;
        text-align: right;
    }
    .btn-blue{
        color:#FFF;
        width:80px;
        height:28px;
        line-height:28px;
        border:none;
        border-radius:5px;
        background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#62c4d7), to(#4c5cb5));
        -moz-box-shadow:1px 1px 1px #000;               /* For Firefox3.6+ */
        -webkit-box-shadow:1px 1px 1px #000;            /* For Chrome5+, Safari5+ */
        box-shadow:1px 1px 1px #000;
    }
    .btn-blue:hover{
        background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#4c5cb5), to(#62c4d7));
        box-shadow:none;
    }
    .btn-gray{
        margin-left:14px;
        color:#ccc;
        width:80px;
        height:30px;
        line-height:30px;
        background-color:#13233d;
        border:1px solid #000;
        border-radius:5px;
        -moz-box-shadow:1px 1px 1px #000 inset;               /* For Firefox3.6+ */
        -webkit-box-shadow:1px 1px 1px #000 inset;            /* For Chrome5+, Safari5+ */
        box-shadow:1px 1px 1px #000 inset;                    /* For Latest Opera */
    }
    .btn-gray:hover{
        color:#fff;
        box-shadow:none;
        border:1px solid #305a9e;
    }
</style>
